<template>
      <!--供应商信息-供应分类-新增/编辑分类弹窗-表单-->
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form" :model="model" :rules="validatorRules">
          <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-radio-group @change="onChangetype" v-model="model.type">
            <a-radio :value="0">一级</a-radio>
            <a-radio :value="1">下级</a-radio>
          </a-radio-group>
        </a-form-model-item>
          <a-form-model-item
          v-show="model.type!=0"
          label="上级"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          :validate-status="validateStatus"
          :hasFeedback="true"
          :required="true">
          <span slot="help">{{ validateStatus=='error'?'请选择上级':'&nbsp;&nbsp;' }}</span>
          <a-tree-select
            style="width:100%"
            :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
            :treeData="treeData"

             v-model="model.parentId"
            placeholder="请选择上级"
            :disabled="disableSubmit"
            @change="handleParentIdChange">
          </a-tree-select>
        </a-form-model-item>

          <a-form-model-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            :label="menuLabel"
            prop="name"
            hasFeedback >
            <a-input placeholder="请输入名称" v-model="model.name" :readOnly="disableSubmit"/>
          </a-form-model-item>
          </a-form-model>

        </a-spin>

</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
//  import  {queryCategoryTreeList} from '@/api/api'
  export default {
    name: 'WtCategoryForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {

        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
        },
        validateStatus:"",
        menuLabel:'名称',
        disableSubmit:false,
        treeData:[],
        url: {
          list:"/wtCategory/queryTreeList",
          add: "/wtCategory/add",
          edit: "/wtCategory/edit",
          queryById: "/wtCategory/queryById"
        },

      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      validatorRules:function() {
        return {
          name:[{ required: true, message: '请输入名称!' }],

        }
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      loadTree(){
        var that = this;
        getAction('/wtCategory/queryTreeList').then((res)=>{
          // console.log(res.result);
          if(res.success){
            // console.log(res)
            that.treeData = [];
            let treeList = res.result.treeList
            for(let a=0;a<treeList.length;a++){
              let temp = treeList[a];
              temp.isLeaf = temp.leaf;
              that.treeData.push(temp);
            }
            // console.log('fedw',that.treeData);
          }
        });
      },
      add () {
        // this.edit(this.modelDefault);
        this.edit({type:0 });
      },
      edit (record) {
        this.model = Object.assign({}, record);
        // console.log('record: ',record)
        this.show = record.type==1?false:true;
        this.menuLabel = record.type==1?'名称':'名称';

        this.visible = true;
        this.loadTree();
      },
      onChangetype(e) {
        if(this.model.type == 1  ){
          this.show = true;
          this.menuLabel = '名称';

        }
        this.$nextTick(() => {
          this.$refs.form.validateField(['url','component']);
        });
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {

            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;

            })
          }

        })
      },
      handleParentIdChange(value){
        if(!value){
          this.validateStatus="error"
        }else{
          this.validateStatus="success"
        }
      },

    }
  }
</script>